import './index.scss';
import React, { useEffect, useState, useRef } from "react";
import { user_wallet_list } from '@/utils/mixin.ts'
import { Button, Input, Avatar, List } from 'antd';
import { ArrowLeftOutlined, PlusOutlined, SearchOutlined, WalletOutlined } from '@ant-design/icons';

import { useTranslation } from "react-i18next";
import { useNavigate } from 'react-router-dom';
const Wallets = () => {
    const navigate = useNavigate();
    const { t } = useTranslation();
    const [walletlist, setWalletlist] = useState([]);

    useEffect(() => {
        user_wallet_list({
            network: 'bsc',
            email: localStorage.getItem('email')

        }).then(res => {
            if (res) {
                setWalletlist(res.data);
            }
        });
    }, []);  // 空数组表示只在组件挂载时执行


    const jump = (val) => {
        localStorage.setItem('detail', JSON.stringify(val))
        navigate('/dashboard/walletsdetail')
    }

    return (
        <div className="wallets">
            <div className="header">
                <Button type="text" className="goBackBtn" onClick={() => navigate('/dashboard/settings')} icon={<ArrowLeftOutlined />}></Button>
                <p className="title">{t("Wallets")}</p>
                <Button type="text" className="addBtn" icon={<PlusOutlined />} onClick={() => navigate('/dashboard/newwallet')}></Button>
            </div>
            <div className="content">
                <div className="search">
                    <Input placeholder='Search' suffix={<SearchOutlined />} />
                </div>
                <div className="data">
                    <List
                        itemLayout="horizontal"
                        dataSource={walletlist}
                        renderItem={(item, index) => (
                            <List.Item>
                                <List.Item.Meta
                                    avatar={<WalletOutlined />}
                                    onClick={() => {jump(item)}}
                                    title={<span>{item.name}</span>}
                                    description={<span>{item.balance}   BNB</span>}
                                />
                            </List.Item>
                        )}
                    />
                </div>
            </div>
        </div>
    )

}

export default Wallets;